Log in Register Dashboard Temp Share Shortlinks Frames API

HTMLify

app.js
Views: 4 | Author: cody
// Define an array of sound names
const sounds = ["applause", "boo", "gasp", "tado", "victory", "wrong"];

// Create a button for each sound and attach a click event listener to it
sounds.forEach((sound) => {
  // Create a new button element and add a CSS class
  const btn = document.createElement("button");
  btn.classList.add("btn");

  // Set the button's label to the current sound name
  btn.innerHTML = sound;

  // Attach a click event listener to the button
  btn.addEventListener("click", () => {
    // Stop any currently playing sounds
    stopSongs();

    // Find the audio element for the current sound name and play it
    document.querySelector(sound).play();
  });

  // Append the button to the ".buttons" container
  document.querySelector(".buttons").appendChild(btn);
});

// Stop all currently playing sounds
function stopSongs() {
  // Iterate over each sound name in the array
  sounds.forEach((sound) => {
    // Find the audio element for the current sound name
    const song = document.querySelector(`#${sound}`);

    // Pause the sound and reset its current time to 0
    song.pause();
    song.currentTime = 0;
  });
}

Comments